@babel/plugin-transform-react-jsx

What is @babel/plugin-transform-react-jsx?

The @babel/plugin-transform-react-jsx package is a Babel plugin that transforms JSX syntax into standard JavaScript function calls that browsers can understand. JSX is a syntax extension for JavaScript that is typically used with React to describe what the UI should look like. By transforming JSX into JavaScript, this plugin allows developers to write their components in a more readable and expressive way while still being able to run them in environments that do not understand JSX natively.

What are @babel/plugin-transform-react-jsx's main functionalities?

Transform JSX to React.createElement calls

This feature transforms JSX syntax into equivalent React.createElement calls. The above JSX code would be transformed into something like: React.createElement('div', { className: 'greeting' }, 'Hello, world!');

const element = <div className='greeting'>Hello, world!</div>;

Custom pragma support

This feature allows the use of a custom pragma (a comment that specifies which function to use instead of React.createElement) to tell Babel to use a different function to create elements. The above code would be transformed to use myCreateElement instead of React.createElement.

/** @jsx myCreateElement */ const element = <div className='greeting'>Hello, world!</div>;

Fragment syntax support

This feature supports the transformation of React Fragment syntax into React.createElement calls. The above code would be transformed into React.createElement(React.Fragment, null, React.createElement(ChildA, null), React.createElement(ChildB, null));

const element = <> <ChildA /> <ChildB /> </>;

Other packages similar to @babel/plugin-transform-react-jsx

@vue/babel-plugin-transform-vue-jsx

This package is similar to @babel/plugin-transform-react-jsx but is tailored for Vue.js instead of React. It transforms JSX syntax into Vue's render function calls.

babel-plugin-inferno

This Babel plugin is designed for the Inferno library, which is similar to React. It transforms JSX into calls that are compatible with Inferno's createElement function.

babel-preset-solid

This package includes a Babel plugin that transforms JSX for the Solid.js library, which is a declarative JavaScript library for building user interfaces, similar to React but with a different reactivity model.

README

@babel/plugin-transform-react-jsx

Turn JSX into React function calls

See our website @babel/plugin-transform-react-jsx for more information.

Install

Using npm:

npm install --save-dev @babel/plugin-transform-react-jsx

or using yarn:

yarn add @babel/plugin-transform-react-jsx --dev

Changelog

v7.25.9 (2024-10-22)

:bug: Bug Fix

• babel-parser, babel-template, babel-types
  • #16905 fix: Keep type annotations in syntacticPlaceholders mode (@liuxingbaoyu)
• babel-helper-compilation-targets, babel-preset-env
  • #16907 fix: support BROWSERSLIST{,_CONFIG} env (@JLHwung)
• Other
  • #16884 Analyze ClassAccessorProperty to prevent the no-undef rule (@victorenator)

:house: Internal

• babel-helper-transform-fixture-test-runner
  • #16914 remove test options flaky (@JLHwung)

:running_woman: Performance

• babel-parser, babel-types
  • #16918 perf: Make VISITOR_KEYS etc. faster to access (@liuxingbaoyu)